<UserControl x:Class="SkinnableApp.AgentDetailsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DockPanel>
    <Border
      DockPanel.Dock="Top"
      Style="{DynamicResource styleContentArea}"
      >
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- AGENT DETAILS HEADER -->
        <Border Grid.Row="0" Style="{DynamicResource styleContentAreaHeader}">
          <Grid>
            <StackPanel Orientation="Horizontal">
              <TextBlock FontSize="20" Padding="8" VerticalAlignment="Center">Search Agent Name</TextBlock>
              <TextBox VerticalAlignment="Center" Width="200"  FontSize="13" Margin="8,0,8,0" />
            </StackPanel>
          </Grid>
        </Border>

        <!-- AGENT DETAILS GRID (Picture & Info)-->
        <Grid Grid.Row="1">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="300" />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="1*" />
          </Grid.ColumnDefinitions>

          <!-- AGENT INFO HEADER -->
          <TextBlock 
            Grid.Row="0" Grid.Column="0" 
            FontSize="18"  
            FontWeight="Bold" 
            Margin="6,4"
            >
            Agent Information
          </TextBlock>

          <!-- PICTURE OF AGENT -->
          <Border Grid.Row="1" Grid.Column="0" Style="{DynamicResource styleAgentImageBorder}" >
            <Image Stretch="UniformToFill" Source="{Binding XPath=Photo}"  />
          </Border>

          <!-- AGENT DETAILS INNER GRID (Contains Agent Info) -->
          <Grid Grid.Row="1" Grid.Column="1" Margin="4,6">
            <Grid.RowDefinitions>
              <RowDefinition />
              <RowDefinition />
              <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="100" />
              <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <!-- Agent Name -->
            <TextBlock Grid.Row="0" Grid.Column="0" FontWeight="Bold">Name: </TextBlock>
            <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
              <TextBlock Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Name/First}" />
              <TextBlock Style="{DynamicResource styleInfoText}" Text=" " />
              <TextBlock Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Name/Last}" />
            </StackPanel>

            <!-- Agent Office Location -->
            <TextBlock Grid.Row="1" Grid.Column="0" FontWeight="Bold">Office Location: </TextBlock>
            <Grid Grid.Row="1" Grid.Column="1">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition />
              </Grid.RowDefinitions>
              <!-- Office Name -->
              <TextBlock Grid.Row="0" Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Office/OfficeName}" />
              <!-- Street Address -->
              <TextBlock Grid.Row="1" Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Office/StreetAddress}" />
              <!-- City, State ZipCode -->
              <StackPanel Grid.Row="2" Orientation="Horizontal">
                <TextBlock Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Office/City}" />
                <TextBlock Style="{DynamicResource styleInfoText}" Text=", " />
                <TextBlock Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Office/State}" />
                <TextBlock Style="{DynamicResource styleInfoText}" Text=" " />
                <TextBlock Style="{DynamicResource styleInfoText}" Text="{Binding XPath=Office/ZipCode}" />
              </StackPanel>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Border>
  </DockPanel>
</UserControl>